<template>
    <div>
        <div class="message">
            <div class="search">
                <el-input placeholder="请输入品牌" v-model="brand" @keyup.enter.native="search"></el-input>
                <el-input placeholder="请输入香型" v-model="flavor" @keyup.enter.native="search"></el-input>
                <el-input placeholder="请输入酒精度" v-model="proof" @keyup.enter.native="search"></el-input>
                <el-button type="primary" icon="el-icon-search" class="search" @click.native="search">搜索</el-button>
            </div>
        </div>
        <div class="list">
            <div class="brand sonlist">
                <h3>品牌：</h3>
                <span v-for="(x, index) in brandlist" :key="index" class="sections brands" @click="getbrandid(x)">{{
                    x.classifyName }}</span>
                <div class="btn">
                    <el-button type="primary" @click="brandflag = true" v-if="addbrandflag" class="addbtn">添加</el-button>
                    <el-button type="danger" v-if="addbrandflag" @click="delbrandbox" class="delbtn">删除</el-button>
                    <el-button v-if="delbrandflag" type="danger" @click="delbrand" class="addbtn">确定</el-button>
                    <el-button v-if="delbrandflag" type="primary" @click="backbrand" class="delbtn">取消</el-button>
                </div>
            </div>
            <div class="flavor sonlist">
                <h3>香型：</h3>
                <span v-for="(x, index) in flavorlist" :key="index" class="sections flavors" @click="getflavorid(x)">{{
                    x.classifyName }}</span>
                <div class="btn">
                    <el-button type="primary" @click="flavorflag = true" v-if="addflavorflag" class="addbtn">添加</el-button>
                    <el-button type="danger" v-if="addflavorflag" @click="delflavorbox" class="delbtn">删除</el-button>
                    <el-button v-if="delflavorflag" type="danger" class="addbtn" @click="delflavor">确定</el-button>
                    <el-button v-if="delflavorflag" type="primary" @click="backflavor" class="delbtn">取消</el-button>
                </div>
            </div>
            <div class="proof sonlist">
                <h3>酒精度：</h3>
                <span v-for="(x, index) in prooflist" :key="index" class="sections proofs" @click="getproofid(x)">{{
                    x.classifyName }}</span>
                <div class="btn">
                    <el-button type="primary" @click="proofflag = true" v-if="addproofflag" class="addbtn">添加</el-button>
                    <el-button type="danger" v-if="addproofflag" @click="delproofbox" class="delbtn">删除</el-button>
                    <el-button v-if="delproofflag" type="danger" class="addbtn" @click="delproof">确定</el-button>
                    <el-button v-if="delproofflag" type="primary" @click="backproof" class="delbtn">取消</el-button>
                </div>
            </div>
        </div>
        <el-dialog title="添加品牌" :visible.sync="brandflag" class="addbox" width="30%">
            <div>
                品牌：
                <el-input placeholder="请添加品牌" v-model="inpbrand" @keyup.enter.native="addbrand"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addbrand">确 定</el-button>
                <el-button @click="brandflag = false, inpbrand = ''">取 消</el-button>
            </span>
        </el-dialog>
        <el-dialog title="添加香型" :visible.sync="flavorflag" class="addbox" width="30%">
            <div>
                香型：
                <el-input placeholder="请添加香型" v-model="inpflavor" @keyup.enter.native="addflavor"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addflavor">确 定</el-button>
                <el-button @click="flavorflag = false, inpflavor = ''">取 消</el-button>
            </span>
        </el-dialog>
        <el-dialog title="添加酒精度" :visible.sync="proofflag" class="addbox" width="30%">
            <div>
                酒精度：
                <el-input placeholder="请添加酒精度" v-model="inpproof" @keyup.enter.native="addproof"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addproof">确 定</el-button>
                <el-button @click="proofflag = false, inpproof = ''">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            basurl: require('../assets/baseUrl').baseUrl,
            brand: "",//品牌
            flavor: "",//香型
            proof: "",//酒精度
            brandlist: [],
            flavorlist: [],
            prooflist: [],
            brandflag: false,
            flavorflag: false,
            proofflag: false,
            addbrandflag: true,
            delbrandflag: false,
            addflavorflag: true,
            delflavorflag: false,
            addproofflag: true,
            delproofflag: false,
            inpbrand: "",
            inpflavor: "",
            inpproof: "",
            brandid: [],
            realbrandid: [],
            flavorid: [],
            realflavorid: [],
            proofid: [],
            realproofid: [],
            pageIndex: 1,
            pageSize: 5,
        }
    },
    methods: {
        //获取类型
        //品牌
        getbrand() {
            this.$http.post(this.basurl + "classifyList", {
                classifyType: 0
            }).then(res => {
                //console.log(res);
                if (res.data.code == 200) {
                    this.brandlist = res.data.data
                }
            })
        },
        getflavor() {
            this.$http.post(this.basurl + "classifyList", {
                classifyType: 1
            }).then(res => {
                //console.log(res);
                if (res.data.code == 200) {
                    this.flavorlist = res.data.data
                }
            })
        },
        getproof() {
            this.$http.post(this.basurl + "classifyList", {
                classifyType: 2
            }).then(res => {
                //console.log(res);
                if (res.data.code == 200) {
                    this.prooflist = res.data.data
                }
            })
        },
        //添加品牌
        addbrand() {
            if (this.inpbrand == "") {
                this.$message({
                    message: '品牌不能为空',
                    type: 'error'
                });
            } else {
                this.$http.post(this.basurl + "addClassify", {
                    classifyType: 0,
                    classifyName: this.inpbrand
                }).then(res => {
                    //console.log(res);
                    if (res.data.code == 200) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.brandlist = res.data.data
                        this.inpbrand = ""
                        this.getbrand()
                        this.brandflag = false;
                    }
                })
            }
        },
        //添加香型
        addflavor() {
            if (this.inpflavor == "") {
                this.$message({
                    message: '香型不能为空',
                    type: 'error'
                });
            } else {
                this.$http.post(this.basurl + "addClassify", {
                    classifyType: 1,
                    classifyName: this.inpflavor
                }).then(res => {
                    //console.log(res);
                    if (res.data.code == 200) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.flavorlist = res.data.data
                        this.inpflavor = ""
                        this.getflavor()
                        this.flavorflag = false;
                    }
                })
            }
        },
        //添加酒精度
        addproof() {
            if (this.inpproof == "") {
                this.$message({
                    message: '酒精度不能为空',
                    type: 'error'
                });
            } else {
                this.$http.post(this.basurl + "addClassify", {
                    classifyType: 2,
                    classifyName: this.inpproof
                }).then(res => {
                    //console.log(res);
                    if (res.data.code == 200) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.prooflist = res.data.data
                        this.inpproof = ""
                        this.getproof()
                        this.proofflag = false;
                    }
                })
            }
        },
        //点品牌删除
        delbrandbox() {
            this.addbrandflag = false;
            this.delbrandflag = true;
            var span = document.querySelectorAll(".brands")
            // console.log(span);
            for (var i = 0; i < span.length; i++) {
                span[i].setAttribute("class", "cccbg sections brands")
                span[i].onclick = function () {
                    // this.className="redbg sections proofs"
                    if (this.className == "cccbg sections brands") {
                        this.className = "redbg sections brands"
                    } else {
                        this.className = "cccbg sections brands"
                    }
                }
            }
        },
        backbrand() {
            this.addbrandflag = true;
            this.delbrandflag = false;
            var span = document.querySelectorAll(".brands")
            // console.log(span);
            for (var i = 0; i < span.length; i++) {
                span[i].setAttribute("class", "sections brands")
                span[i].onclick = function () { }
            }
        },
        //选中获取要删除的id，跳转商品
        getbrandid(brand) {
            let brandid = brand.classifyId
            let brandname = brand.classifyName
            if (this.addbrandflag == true) {
                //console.log(brand);
                this.$router.push("/projectmananger/projectlist?message=0&brand=" + brandname)
            } else {
                this.brandid.push(Number(brandid));
                let countMap = new Map();
                let realList = []
                this.brandid.forEach(v => {
                    if (countMap.has(v)) {
                        countMap.set(v, countMap.get(v) + 1);
                    } else {
                        countMap.set(v, 1);
                    }
                })
                countMap.forEach((count, num) => {
                    if (count % 2 == 0) {
                    } else {
                        realList.push(num)
                    }
                });
                this.realbrandid = realList
            }
        },
        delbrand() {
            if (this.realbrandid.length == 0) {
                this.$message.error("请选择要删除的对象")
                return
            } else {
                this.$http.post(this.basurl + "deleteClassify", {
                    classifyIds: this.realbrandid
                }).then(res => {
                    //console.log(res);
                    if (res.data.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getbrand();
                        this.backbrand();
                        this.addbrandflag = true;
                        this.delbrandflag = false;
                    }
                })
            }
        },
        //点香型删除
        delflavorbox() {
            this.addflavorflag = false;
            this.delflavorflag = true;
            var span = document.querySelectorAll(".flavors")
            // console.log(span);
            for (var i = 0; i < span.length; i++) {
                span[i].setAttribute("class", "cccbg sections flavors")
                span[i].onclick = function () {
                    if (this.className == "cccbg sections flavors") {
                        this.className = "redbg sections flavors"
                    } else {
                        this.className = "cccbg sections flavors"
                    }
                }
            }
            this.flavorid = []
        },
        backflavor() {
            this.addflavorflag = true;
            this.delflavorflag = false;
            var span = document.querySelectorAll(".flavors")
            // console.log(span);
            for (var i = 0; i < span.length; i++) {
                span[i].setAttribute("class", "sections flavors");
                span[i].onclick = function () { };
            }
        },
        //选中获取要删除的id
        getflavorid(flavor) {
            let flavorid = flavor.classifyId
            let flavorname = flavor.classifyName
            if (this.addflavorflag == true) {
                this.$router.push("/projectmananger/projectlist?message=0&flavor=" + flavorname)
            } else {
                this.flavorid.push(Number(flavorid));
                let countMap = new Map();
                let realList = []
                this.flavorid.forEach(v => {
                    if (countMap.has(v)) {
                        countMap.set(v, countMap.get(v) + 1);
                    } else {
                        countMap.set(v, 1);
                    }
                })
                countMap.forEach((count, num) => {
                    if (count % 2 == 0) {
                    } else {
                        realList.push(num)
                    }
                });
                this.realflavorid = realList
            }
        },
        delflavor() {
            if (this.realflavorid.length == 0) {
                this.$message.error("请选择要删除的对象")
                return
            } else {
                this.$http.post(this.basurl + "deleteClassify", {
                    classifyIds: this.realflavorid
                }).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getflavor();
                        this.backflavor();
                        this.addflavorflag = true;
                        this.delflavorflag = false;
                    }
                })
            }
        },
        //点酒精度删除
        delproofbox() {
            this.addproofflag = false;
            this.delproofflag = true;
            var span = document.querySelectorAll(".proofs")
            // console.log(span);
            for (var i = 0; i < span.length; i++) {
                span[i].setAttribute("class", "cccbg sections proofs")
                span[i].onclick = function () {
                    // this.className="redbg sections proofs"
                    if (this.className == "cccbg sections proofs") {
                        this.className = "redbg sections proofs"
                    } else {
                        this.className = "cccbg sections proofs"
                    }
                }
            }
            this.proofid = []
        },
        backproof() {
            this.addproofflag = true;
            this.delproofflag = false;
            var span = document.querySelectorAll(".proofs")
            // console.log(span);
            for (var i = 0; i < span.length; i++) {
                span[i].setAttribute("class", "sections proofs")
                span[i].onclick = function () { }
            }
        },
        //选中获取要删除的id
        getproofid(proof) {
            let proofid = proof.classifyId
            let proofname = proof.classifyName
            if (this.addproofflag==true) {
                this.$router.push("/projectmananger/projectlist?message=0&proof=" + proofname)
            } else {
                this.proofid.push(Number(proofid));
                let countMap = new Map();
                let realList = []
                this.proofid.forEach(v => {
                    if (countMap.has(v)) {
                        countMap.set(v, countMap.get(v) + 1);
                    } else {
                        countMap.set(v, 1);
                    }
                })
                countMap.forEach((count, num) => {
                    if (count % 2 == 0) {
                    } else {
                        realList.push(num)
                    }
                });
                this.realproofid = realList
            }
        },
        delproof() {
            if (this.realproofid.length == 0) {
                this.$message.error("请选择要删除的对象")
                return
            } else {
                this.$http.post(this.basurl + "deleteClassify", {
                    classifyIds: this.realproofid
                }).then(res => {
                    // console.log(res);
                    if (res.data.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getproof();
                        this.backproof();
                        this.addproofflag = true;
                        this.delproofflag = false;
                    }
                })
            }

        },
        //搜索
        search() {
            this.$router.push("/projectmananger/projectlist?message=0&brand=" + this.brand + "&flavor=" + this.flavor + "&proof=" + this.proof)
        }
    },
    mounted() {
        this.getbrand();
        this.getflavor();
        this.getproof();
    }
}
</script>

<style lang="less">
.message {
    width: 80vw;
    height: 65px;
    align-items: center;
    margin-bottom: 15px;
    margin-left: 30px;
    display: flex;

    .search {
        display: flex;
        align-items: center;

        .el-input {
            margin: 0 5px;
        }
    }
}

.list {
    width: 80vw;
    height: 65px;
    margin-bottom: 15px;
    margin-left: 35px;

    .sonlist {
        position: relative;
        margin: 50px 0px;
        white-space: pre-wrap;

        .sections {
            padding: 5px 10px;
            border-radius: 3px;
            margin: 10px 30px;
            display: inline-block;
            white-space: pre-wrap;
            cursor: pointer;
        }

        .cccbg {
            background: #dddddd;
        }

        .redbg {
            background: #ff6363;
        }

        .btn {
            float: right;
        }
    }

    .proof {
        .sections {
            padding: 5px 10px;
            border-radius: 3px;
            margin: 10px;
            white-space: pre-wrap;
        }
    }

    h3 {
        display: inline-block;
    }
}

.addbox {
    text-align: center;

    .el-color-picker__icon,
    .el-input,
    .el-textarea {
        width: 70%;
    }

    .el-dialog__footer {
        text-align: center;
    }
}
</style>